import { useCallback, useState, useEffect } from "react";
import "./App.css";
import "./ui.css";
import Test from "./components/Test";
import Header from "./components/Header";
import AddInput from "./components/AddInput";
import TodoItem from "./components/TodoItem";

function App() {
  const [isInputShow, setInputShow] = useState(false);
  const [todoList, setTodoList] = useState([]);
  // const [a, setA] = useState(1);
  // useEffect(() => {
  // }, [a]);
  // 每当a变化了,就执行副作用程序
  useEffect(() => {
    const todoData = JSON.parse(localStorage.getItem("todoData") || "[]");
    setTodoList(todoData);
  }, []);

  useEffect(() => {
    localStorage.setItem("todoData", JSON.stringify(todoList));
  }, [todoList]);

  const [title, setTitle] = useState("这是一个标题");
  const changeTitle = (title) => {
    setTitle(title);
  };

  const addItem = useCallback((value) => {
    const dataItem = {
      id: new Date().getTime(),
      content: value,
      completed: false,
    };
    setTodoList((todoList) => [...todoList, dataItem]);
    setInputShow(false);
  }, []);

  return (
    <div className='App'>
      <Header openInput={() => setInputShow(!isInputShow)} />
      <AddInput isInputShow={isInputShow} addItem={addItem} />
      <Test title={title} changeTitle={changeTitle} />
      <ul className='todo-list'>
        {todoList.map((item, index) => {
          return <TodoItem data={item} key={index} />;
        })}
      </ul>
    </div>
  );
}

export default App;
